HTML5种新增与通信相关的三个功能
- 跨文档消息传输功能
可以在不同网页、不同端口、不同域之间进行消息的传递 - 使用WebSockets API来通过socket端口传递数据的功能
可以让客户端与服务器端通过socket端口来传输数据 - 通过Server-Sent Events API将服务器端事件主动推送到客户端的功能
服务器端可以每隔一段时间主动向客户端发送一个携带数据的事件
跨文档消息传输
HTML5提供了在网页文档之间互相接受与发送信息的功能,只要获取到网页所在窗口对象的实例,同源(域+端口号)的Web网页之间可以互相通信,也可以实现跨域通信。
发送
使用window对象的postMessage方法向其他窗口发送消息
1 | otherWindow.postMessage(message,targetOrign); |
该方法使用两个参数,第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址。
接受
接受从其他窗口那里发过来的消息,需要对窗口对象的message事件进行监视
1 | window.addEventListener("message",function(){...},false); |
通道通信
通道通信提供了一种在多个源之间进行通信的方法,这些源之间通过端口进行通信。
目前只有chrome支持通道通信机制。
WebSockets 通信
WebSocket API是下一代客户端-服务器的异步通信方法。也是是Html5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。